<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- jquery链接 -->
    <script src="../../四段/jquery.js"></script>
    <link rel="stylesheet" href="../bootstrap-3.4.1/dist/css/bootstrap.css">
    <script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
    <!-- key -->
    <script language="javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=d70cc4ab1718d09ff105699312120a22&plugin=AMap.Scale,AMap.ToolBar"></script>
    <script type="text/javascript" src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"></script>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        background: white;
        height: 100%;
        margin: 0;
        width: 100%;
    }

    .bigDiv {
        width: 1160px;
        margin: -200px auto 84px;
        z-index: 999;
        background: #fff;
        border-radius: 3px;
        font-weight: 300;
        -webkit-box-shadow: 0 0 3px 0 rgb(0 0 0 / 9%);
        box-shadow: 0 0 3px 0 rgb(0 0 0 / 9%);
    }

    .network {
        position: relative;
    }

    .map {
        height: 610px;
        overflow: hidden;
        position: relative;
        background: #f2f5fa;
        background-size: 82px 43px;
    }

    .one {
        height: 209px;
        text-align: center;
        position: relative;
    }

    header {
        min-width: 1260px;
        height: 390px;
        background: #49a8f5;
    }

    .div {
        margin: 0 auto;
        width: 1160px;
    }

    .table-bod thead th:first-child {
        width: 33.33%;
    }

    .table-bod th {
        height: 36px;
        text-align: center;
        line-height: 36px;
        color: #fff;
        font-size: 14px;
        font-weight: normal;
        background: rgba(73, 168, 245, 0.75);
    }

    .table td {
        text-align: center;
    }

    .table-add th {
        text-align: center;
        line-height: 36px;
        color: #fff;
        font-size: 14px;
        font-weight: normal;
        background: rgba(73, 168, 245, 0.75);
    }

    .table-add tbody tr:nth-child(even) {
        text-align: center;
        background-color: #ccc;
    }

    .table-add tbody tr:nth-child(odd) {
        background-color: #f2f5fa;
    }

    .status_item {
        width: 230px;
        display: inline-block;
        text-align: center;
        vertical-align: top;
        margin: 50px 0 0 0;
    }

    .status_circle {
        width: 99px;
        height: 99px;
        line-height: 99px;
        color: #fff;
        font-size: 30px;
        display: block;
        margin: 0 auto;
        position: relative;
        border-radius: 50%;
        border: 1px solid #e0e0e0;
        background: #30c7fb;
        -webkit-box-shadow: 0 0 0 4px #fff inset;
        box-shadow: 0 0 0 4px #fff inset;
    }

    .scan {
        width: 100px;
        height: 100px;
        display: block;
        top: 0;
        bottom: 0;
        position: absolute;
        background: url(/public/dist/scan.7e8005.png) no-repeat center center;
        /* transform: rotate(180deg); */
        -webkit-animation: scan 2s linear infinite;
        animation: scan 2s linear infinite;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    .core {
        position: relative;
        z-index: 2;
    }

    small {
        font-size: 14px;
    }

    p {
        font-size: 14px;
        color: #585858;
        margin-top: 9px;
    }

    #lastDiv {
        width: 100%;
        height: 500px;
        margin: auto;
    }

    .map_info {
        bottom: 0;
        left: 0;
        margin: 0 0 28px 36px;
        position: absolute;
    }

    .map_info li {
        line-height: 28px;
        font-size: 14px;
        color: #656565;
        position: relative;
        padding: 0 0 0 36px;
        margin: 20px 0 0 0;
    }

    li {
        list-style: none;
    }

    .map_info li::before {
        content: '';
        width: 28px;
        height: 28px;
        top: 0;
        left: 0;
        position: absolute;
        border-radius: 50%;
    }

    .map_info li:first-child:before {
        background: #30b3a3;
    }

    .map_info li:nth-child(2)::before {
        background: #86e9aa;
    }

    .map_info li:nth-child(3)::before {
        background: #f1e550;
    }

    .map_info li:nth-child(4)::before {
        background: #ffc380;
    }

    .map_info li:nth-child(5)::before {
        background: #fb7477;
    }
</style>

<body>
    <div class="bigDiv">
        <div class="network">
            <div class="one">
                <div class="status_item">
                    <span class="status_circle">
                        <span class="scan"></span>
                        <span class="core"><span id="monitoring"></span> <small
                                style="font-size: 14px;">个</small></span>
                    </span>
                    <p>监测点</p>
                </div>
                <div class="status_item">
                    <span class="status_circle" style="background:#89dfb3">
                        <span class="scan"></span>
                        <span class="core"><span class="first"></span> <small style="font-size: 14px;">ms</small></span>
                    </span>
                    <p>
                        <span class="max_min" style="color: #89dfb3;">最快</span>
                        <span id="Fastest"></span>
                    </p>
                </div>
                <div class="status_item">
                    <span class="status_circle" style="background-color: #fd7e7d;">
                        <span class="scan"></span>
                        <span class="core"><span class="last"></span> <small style="font-size: 14px;">ms</small></span>
                    </span>
                    <p>
                        <span class="max_min" style="color: #fd7e7d;">最慢</span>
                        <span id="Slowest"></span>
                    </p>
                </div>
                <div class="status_item">
                    <span class="status_circle" style="background:#86e9aa">
                        <span class="scan"></span>
                        <span class="core"><span id="average"></span> <small style="font-size: 14px;">ms</small></span>
                    </span>
                    <p>平均</p>
                </div>
            </div>
            <div id="container" class="map" tabindex="0">
                <ul class="map_info">
                    <li>
                        &lt;20ms
                    </li>
                    <li style="background-color: 1;">20-50ms</li>
                    <li style="background-color: 1;">50-70ms</li>
                    <li style="background-color: 1;">70-100ms</li>
                    <li style="background-color: 1;">
                        &gt;100ms
                    </li>
                </ul>
            </div>
            <div id="panel" class="scrollbar1">
                <ul id="area-tree">
                </ul>
            </div>
            <table class="table table-bod  table-striped">
                <thead>
                    <tr>
                        <th>监测点</th>
                        <th>监测点IP</th>
                        <th>链路耗时</th>
                        <th>监测时间</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div id="lastDiv"></div>
        </div>
    </div>
</body>
<script>
    let list = [],mapData = []
    $.ajax({
        type: 'GET',
        url: 'https://liu.zzgoodqc.cn/gaode',
        dataType: 'json',
        success: function (e) {
            console.log(e);

            list.push(e.data.data.province)
            let str = ''
            for (var i in list[0]) {
                for (var j in list[0][i].children) {
                    str += `<tr>
                                <td>${list[0][i].children[j].city}${'【'+list[0][i].children[j].service+'】'}</td>
                                <td>${list[0][i].children[j].ip}</td>
                                <td class='td'>${list[0][i].children[j].net_time}ms</td>
                                <td>${list[0][i].children[j].update_time}</td>
                            </tr>`
                }
            }
            $('tbody').html(str)
            // 网速最慢的
            let strSlowest = `${e.data.data.max.province}${e.data.data.max.city}[${e.data.data.max.service}]`
            $('#Slowest').html(strSlowest)
            $('.last').html(e.data.data.max.val)
            // 网速最快的
            let strFastest = `${e.data.data.min.province}${e.data.data.min.city}[${e.data.data.min.service}]`
            $('#Fastest').html(strFastest)
            $('.first').html(e.data.data.min.val)
            // 平均值
            $('#average').html(e.data.data.avg)
            // 监测点个数
            $('#monitoring').html(e.data.data.monitoring)

            for(let i in e.data.data.province) {
                mapData.push({
                    province:e.data.data.province[i].province,
                    max_net_time : e.data.data.province[i].max_net_time,
                    children:e.data.data.province[i].children
                })
            }

            var colors = {};
            var getColorByDGP = function(name){
                let index = mapData.findIndex(function (item) {
                    if(name.indexOf(item.province) > -1) {
                        return true
                    }else {
                        return false
                    }
                })
                if(index > -1) {
                    if(mapData[index].max_net_time < 20) {
                        return '#30b3a3'
                    }else if (mapData[index].max_net_time < 50 && mapData[index].max_net_time >= 20) {
                        return '#86e9aa'
                    }else if (mapData[index].max_net_time < 70 && mapData[index].max_net_time >= 50) {
                        return '#f1e550'
                    }else if (mapData[index].max_net_time < 100 && mapData[index].max_net_time >= 70) {
                        return '#ffc380'
                    }else {
                        return '#fb7477'
                    }
                }
                return  '#dae2f1'
            }

            var disCountry = new AMap.DistrictLayer.Country({
                zIndex:10,
                SOC:'CHN',
                depth:1,
                styles:{
                    'nation-stroke':'#ccc',
                    'coastline-stroke':'#ccc',
                    'province-stroke':'grey',
                    'fill':function(props){
                        return getColorByDGP(props.NAME_CHN)
                    }
                }
            })
            // 显示地图
            var map = new AMap.Map("container",{
                    zooms: [4, 5],
                    center:[106.122082,33.719192],
                    zoom: 4,
                    isHotspot:false,
                    defaultCursor:'pointer',
                    layers:[
                        disCountry
                    ],
                    viewMode:'3D',
            })

            map.on('complete',function(){
                var layer = new AMap.LabelsLayer({
                    // 开启标注避让，默认为开启，v1.4.15 新增属性
                    collision: false,
                    // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
                    animation: false,
                });
                for (var i = 0; i < LabelsData.length; i++) {
                    var labelsMarker = new AMap.LabelMarker(LabelsData[i]);
                    layer.add(labelsMarker);
                }
                map.add(layer);
            })

            AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {
                //创建一个实例
                var districtExplorer = window.districtExplorer = new DistrictExplorer({
                    eventSupport: true, //打开事件支持
                    map: map
                });
                //当前聚焦的区域
                var currentAreaNode = null;
                //鼠标hover提示内容
                var $tipMarkerContent = $(`<table style='width:300px' class='table table-add table-striped'></table>`);
                var tipMarker = new AMap.Marker({
                    content: $tipMarkerContent.get(0),
                    offset: new AMap.Pixel(0, 0),
                    bubble: true
                });
                //根据Hover状态设置相关样式
                function toggleHoverFeature(feature, isHover, position) {
                    tipMarker.setMap(isHover ? map : null);
                    if (!feature) {
                        return;
                    }
                    var props = feature.properties;
                    if (isHover) {
                        //更新提示内容
                        let index = mapData.findIndex(function (item) {
                            if(props.name.indexOf(item.province) > -1) {
                                return true
                            }else {
                                return false
                            }
                        })
                        let strHtml = `<thead>
                                        <tr>
                                            <th colspan='2'>${props.name}</th>
                                        </tr>
                                        <tr>
                                            <th>检测点</th>
                                            <th>耗时</th>    
                                        </tr>
                                    </thead>
                                    <tbody>
                                    ` 
                        if(index > -1) {
                            for(let i in mapData[index].children) {
                                strHtml += `
                                        <tr>        
                                            <td>${mapData[index].children[i].city}${mapData[index].children[i].service}</td>
                                            <td>${mapData[index].children[i].net_time}</td>
                                        </tr>
                                    `
                            }
                        }else {
                            strHtml += `<td colspan='2'>此区域无监测站</td>`
                        }
                        strHtml += `</tbody>`
                        $tipMarkerContent.html(strHtml);
                        //更新位置
                        tipMarker.setPosition(position || props.center);
                    }
                    $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);
                    //更新相关多边形的样式
                    var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
                    for (var i = 0, len = polys.length; i < len; i++) {
                        polys[i].setOptions({
                            fillOpacity: isHover ? 0.5 : 0.2
                        });
                    }
                }
                //监听feature的hover事件
                districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
                    toggleHoverFeature(feature, e.type === 'featureMouseover',
                        e.originalEvent ? e.originalEvent.lnglat : null);     
                });
                //监听鼠标在feature上滑动
                districtExplorer.on('featureMousemove', function(e, feature) {
                    //更新提示位置
                    tipMarker.setPosition(e.originalEvent.lnglat);
                    
                });

                //feature被点击
                districtExplorer.on('featureClick', function(e, feature) {
                    var props = feature.properties;
                    console.log(props.name)
                    let index = mapData.findIndex(function (item) {
                        if(props.name.indexOf(item.province) > -1) {
                            return true
                        }else {
                            return false
                        }
                    })
                    console.log(index)
                    if(index > -1) {
                        let name = mapData[index].province
                        ajax(name)
                    }
                    //如果存在子节点
                    // if (props.childrenNum > 0) {
                        //切换聚焦区域
                        switch2AreaNode(props.adcode);
                    // }
                });
                    //切换区域后刷新显示内容
                function refreshAreaNode(areaNode) {
                    districtExplorer.setHoverFeature(null);
                    //更新选中节点的class
                    var $nodeEles = $('#area-tree').find('h2');
                    $nodeEles.removeClass('selected');
                    var $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');
                    //展开下层节点
                    $selectedNode.closest('li').removeClass('hide-sub');
                    //折叠下层的子节点
                    $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
                    }
                    //切换区域
                    function switch2AreaNode(adcode, callback) {
                    if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
                        return;
                    }
                    loadAreaNode(adcode, function(error, areaNode) {
                        if (error) {
                            if (callback) {
                                callback(error);
                            }
                            return;
                        }
                        currentAreaNode = window.currentAreaNode = areaNode;
                        //设置当前使用的定位用节点
                        districtExplorer.setAreaNodesForLocating([currentAreaNode]);
                        refreshAreaNode(areaNode);
                        if (callback) {
                            callback(null, areaNode);
                        }
                    });
                }
                    //加载区域
                function loadAreaNode(adcode, callback) {
                districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
                    
                });
                }
                //全国
                switch2AreaNode(100000);
            });

        }
    })


    function ajax(a) {
        let time = new Date()
        var newTimeFullYear = time.getFullYear(),
            newTimeMonth = time.getMonth() + 1,
            newTimeDate = time.getDate(),
            newTimeHours = time.getHours(),
            newTimeMinutes = time.getMinutes(),
            newTimeSeconds = time.getSeconds(),
            newTime = newTimeFullYear + '-' + newTimeMonth + '-' + newTimeDate + ' ' + newTimeHours + ':' + newTimeMinutes + ':' + newTimeSeconds,
            oldTime = newTimeFullYear + '-' + newTimeMonth + '-' + newTimeDate + ' ' + newTimeHours - 1 + ':' + newTimeMinutes + ':' + newTimeSeconds
        $.ajax({
            type: 'POST',
            url: 'https://liu.zzgoodqc.cn/search' ,
            data: `start_time=${oldTime}&end_time=${newTime}&province=${a}`,
            dataType: 'json',   
            success: function (e) {
                console.log(e)
                var myEcharts = echarts.init(document.getElementById('lastDiv'))
                var option = {
                    legend: {},
                    tooltip: {
                        trigger: 'axis',
                        showContent: false
                    },
                    dataset: {
                        source: [
                            ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                            ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1]
                        ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: {},
                    grid: { top: '55%'},
                    
                    series: [
                        {
                            type: 'line',
                            smooth: true ,
                            seriesLayoutBy: 'row',
                            emphasis: { focus: 'series' }
                        }
                    ]
                }
                myEcharts.setOption(option)
            }
        })
    }
</script>
<script type="text/javascript" src="//webapi.amap.com/demos/js/liteToolbar.js?v=1.0.11"></script>
</html>